<template>
  <div>
    <el-form
      :label-position="position"
      label-width="100px"
      style="max-width: 460px"
      class="fromBasePosition"
      :rules="rules"
      ref="form"
      :model="ruleForm"
    >
      <h2 style="text-align: center">注册用户</h2>

      <el-form-item label="用户名"  prop="username">
        <el-input v-model="ruleForm.username" placeholder="请输入用户名"/>
      </el-form-item>

      <el-form-item label="帐号"  prop="account">
        <el-input v-model="ruleForm.account"  placeholder="请输入账号"/>
      </el-form-item>

      <el-form-item label="密码"  prop="password">
        <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码" show-password="true"/>
      </el-form-item>

      <el-form-item label="性别" prop="sex" >
        <el-select v-model="ruleForm.sex" style="width: 360px">
          <el-option
            v-for="item in options"
            :key="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="手机号"  prop="phone">
        <el-input v-model="ruleForm.phone"  placeholder="请输入手机号"/>
      </el-form-item>
      <div style="display:flex;justify-content: center">
        <el-button type="primary" @click="Register" style=" margin-bottom: 10px;width: 70%;">注册</el-button>
      </div>


    </el-form>
  </div>
</template>
<script>
import {register } from "../api/index";

export default {
  data(){
    const checkPhone = (rule, value, callback)=>{
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100)
    }
    return{
      ruleForm:{
        username:"",
        password:"",
        phone:"",
        account:"",
        sex: ''
      },
      options: ['男','女'],
      position:"right",
      rules:{
        username:[
          {required:true,trigger:'blur',message:'请输入用户名'},
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" },
        ],
        password: [
          {required:true,trigger:'blur',message:'请输入密码'},
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" },
        ],
        phone: [
          {required:true,trigger:'blur',message:'请输入正确的手机号',validator: checkPhone}
        ],
        account:[{required:true,trigger:'blur',message:'请输入帐号'}],
        sex: [{required:true,trigger:'blur',message:'请选择性别'}]
      },
    };
  },
  methods:{
    cleanForm(){
      this.ruleForm.username=''
      this.ruleForm.password=''
      this.ruleForm.phone=''
      this.ruleForm.account=''
      this.ruleForm.sex=''
    },
    Register(){
      this.$refs.form.validate((isPass)=> {
        if (isPass) {
          register({
            "userName": this.ruleForm.username,
            "account": this.ruleForm.account,
            "pswd": this.ruleForm.password,
            "gender": this.ruleForm.sex,
            "phone": this.ruleForm.phone
          }).then(res => {
            if (res.status === 200) {
              this.$message({
                message: '注册成功',
                type: 'success'
              })
              this.$router.push('/')
            } else if (res.status === 201) {
              this.$message({
                message: '账号已被注册',
                type: 'warning'
              })
              this.cleanForm()
            } else {
              this.$message.error('注册失败')
              // this.$message.error(res.data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style scoped>
.fromBasePosition{
  margin:180px auto;
  border: 1px solid #f6f6f6;
  padding: 35px 35px 15px 35px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 25px #cac6c6;

}
</style>
